<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 粘性布局 -->
    <van-sticky>
      <!-- 导航栏 -->
      <van-nav-bar
        title="我的车辆"
        left-text=""
        left-arrow
        @click-left="returnTo"></van-nav-bar>
      <van-row
        style="margin-top: 18px; margin-left: 9px; text-align: left"
        v-for="item in car"
        v-if="item.carNum != 0">
        <van-col span="12"
          >{{ item.carNo }}
          <div>姓名: {{ item.smallname }}</div>
          <div>手机号: {{ item.mobile }}</div>
        </van-col>
        <van-col span="5"></van-col>
        <van-col span="7" style="margin-bottom: 15px"
          >绑定门店{{ item.carNum }}家
          <div style="visibility: hidden">填充</div>
          <div
            @click="Dialog(item.carId)"
            style="text-align: right; margin-right: 18px">
            <a style="text-decoration: none; color: red">删除</a>
          </div>
        </van-col>
        <hr />
      </van-row>
      <!-- 标题 -->
    </van-sticky>
  </div>
</template>

<script>
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  props: {},
  data() {
    //定义数据的地方
    return {
      arrSort: [], //存放点名
      areaList: {
        province_list: {
          1: "123店",
          2: "456店",
        },
      },
      number: "",

      car: [],
    };
  },
  created() {
    this.loadData();
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    loadData() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/car/queryPageAll")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.car = response.data.data;
            _this.mendian();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    mendian() {
      let num = -1;
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      for (var i = 0; i < this.car.length; i++) {
        this.$http
          .get("/car/queryCar?id=" + this.car[i].carId)
          .then(function (response) {
            console.log(response);
            if (response.data.code == 200) {
              num = num + 1;
              //this不可以直接使用 代表的是axios对象
              _this.car[num].carNum = response.data.data[0].carNum;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    returnTo() {
      this.$router.go(-1);
    },
    //刷新
    refresh() {
      //原始js重新请求
      location.reload();
    },
    //  提示弹出框
    TipDialog() {
      this.$dialog
        .alert({
          // title:'标题呀',
          message: "弹框内容",
        })
        .then(() => {
          console.log("点击了确认");
        });
    },

    //（确认、取消）的弹出框
    Dialog(carId) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定删除该车牌吗？",
          confirmButtonColor: "#2979FF",
        })
        .then(() => {
          console.log("点击了确认");
          this.delete(carId);
        })
        .catch(() => {
          console.log("点击了取消");
        });
    },
    delete(carId) {
      var _this = this;
      this.$http
        .delete("/car/deleteById?id=" + carId)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //刷新
            _this.refresh();
            // this.deleteAA(carId);
          } else {
            Toast.fail("操作失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //  deleteAA(carId) {
    //     this.$http
    //       .delete(
    //         "/carAndStore/deleteById?id=" +
    //           carId +
    //           "&token=lx-eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhZG1pbiIsInR1c2VySWQiOiIyIiwibG9naW4iOiIxNjYzNzAyNjE0NSIsImlhdCI6MTY4NzkxMDk1OX0.SlMml9CIdrg3VD6qmmuy9m91jh-4Mx0WMbUWnlBqUE0"
    //       )
    //       .then(function (response) {
    //         console.log(response);
    //       })
    //       .catch(function (error) {
    //         console.log(error);
    //       });
    //   },
  },
};
</script>
